<template>
  <div class="login">
    <div class="loginContent">
      <a-form-model
        class="formModel"
        :model="formInline"
        @submit="handleSubmit"
        @submit.native.prevent
        :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item label="Username">
          <a-input v-model="formInline.uname" placeholder="Username">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="Password">
          <a-input v-model="formInline.password" type="password" placeholder="Password">
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>

        <div class="login_button">
          <!-- :disabled="formInline.uname === '' || formInline.password === ''" -->
          <a-button
            type="primary"
            html-type="submit"
          >Login</a-button>

          <a-button @click="showModal" >register</a-button>

        </div>
        <!-- <a-form-model-item class="login_button">
        </a-form-model-item> -->
      </a-form-model>
    </div>
    <a-modal v-model="visible" width="400px" title="register" :footer="null" @ok="handleOk">
       <a-form-model
        class="formModel"
        :model="registerInline"
        @submit="handleRegister"
        @submit.native.prevent
      >
        <a-form-model-item>
          <a-input v-model="registerInline.uname" placeholder="Username">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input v-model="registerInline.password" type="password" placeholder="Password">
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item class="regist_button">
          <a-button
            style="width:100%"
            type="primary"
            html-type="submit"
            :disabled="registerInline.uname === '' || registerInline.password === ''"
          >submit</a-button>

        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import api from '../api/index';

export default {
  name: 'Login',
  // directives: {
  //   GoogleSignInButton,
  // },
  data() {
    return {
      type: 'login',
      visible: false,
      formInline: {
        uname: '',
        password: '',
      },
      registerInline: {
        uname: '',
        password: '',
      },
      clientId:
        '591883498233-ahq1mijrhjld6n6cf68c5mo305antecl.apps.googleusercontent.com',
    };
  },
  methods: {

    switchToLogin() {
      this.type = 'login';
    },
    login() {
      api
        .post('/auth/login', this.formInline)
        .then((res) => {
          this.$message.success('login success!');
          localStorage.setItem('userId', res.data.data.user_id);
          this.$router.push({ name: 'index' });
        })
        .catch(({ response }) => {
          this.$message.error(response.data.msg);
        });
      // this.$router.push({ name: 'index' });
    },
    handleSubmit() {
      this.login();
    },
    handleRegister() {
      api
        .post('/auth/regist', this.registerInline)
        .then(() => {
          this.$message.success('login success!');
          this.registerInline = {
            uname: '',
            pwd: '',
          };
          this.visible = false;
          // this.$router.push({ name: 'index'  });
        })
        .catch(({ response }) => {
          this.$message.error(response.data.msg);
        });
    },
    handleOk() {
      this.visible = true;
    },
    showModal() {
      this.visible = true;
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  width: 100%;
  background: rgb(81, 138, 202);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  align-items: center;
}
.login_button{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 0px;
}

.loginContent {
  /* width: 30vw;
  height: 20vw; */
  min-width: 350px;
  /* min-height: 250px; */
  background: white;
  border-radius: 4px;
  /* padding: 20px 3vw; */
}
.formModel {
  display: flex;
  width: 350px;
  flex-direction: column;
  justify-content: center;
  padding: 50px 30px 30px 30px;
}
.regist_button{
  width: 100%;
  text-align: center;
}
</style>
